<template>
  <div>
    <my-table :columns="columns" :data="tableData" :operation="operation">
      <template #nameHeader>
        <div>自定义表头</div>
      </template>
    </my-table>
  </div>
</template>

<script setup>
import MyTable from "./my-table.vue";

const columns = [
  {
    label: 'id',
    prop: 'id',
    tooltip: 'id的描述'
  },
  {
    label: '姓名',
    prop: 'name',
    formatter(item) {
      return item.name + '~'
    }
  },
  {
    label: '年龄',
    prop: 'age'
  }
]
const tableData = [
  {
    id: 1,
    name: 'jack',
    age: 18
  },
  {
    id: 2,
    name: 'tom',
    age: 18
  },
  {
    id: 3,
    name: 'jerry',
    age: 18
  }
]
const operation = {
  columns: [
    {
      text: '详情'
    }
  ]
}
</script>
